<template>
  <div class="collection-result">
    <el-form :inline="true" v-model="modelData" class="search-form">
      <el-form-item label="任务名称:" class="form-input">
        <el-input v-model.trim="modelData.taskName" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态:" class="form-input">
        <el-select v-model="modelData.taskResultStatus">
          <el-option label="全部" :value="null"></el-option>
          <el-option label="执行中" :value="0"></el-option>
          <el-option label="执行成功" :value="1"></el-option>
          <el-option label="执行失败" :value="2"></el-option>
          <!-- <el-option label="手动中止" value="3"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button id="btn" type="primary" size="small" @click="onSubmit(1)"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="server-table">
      <div class="table-title">
        <span class="table-title-text">采集结果管理</span>
      </div>
      <el-table
        :data="tableList"
        :cell-style="{ color: '#333333' }"
        :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          prop="taskName"
          label="任务名称"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="syncDataSource"
          label="同步数据源"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="syncDataObject"
          label="同步对象"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="targetDataSource"
          label="目标数据源"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="targetModel"
          label="目标模型"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="syncTypeValue"
          label="更新策略"
          align="center"
          show-overflow-tooltip
        >
          <!-- <template slot-scope="scope">
            <span>{{ syncType.get(+scope.row.syncType) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column
          prop="taskResultStatus"
          label="当前任务状态"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <i
              class="little-circle"
              :class="status.get(+scope.row.taskResultStatus).className"
            ></i>
            <span>{{ status.get(+scope.row.taskResultStatus).name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="200">
          <template
            slot-scope="scope"
            class="test"
            :style="{
              width: `${
                status.get(+scope.row.taskResultStatus).operation.length * 70
              }px`,
            }"
          >
            <el-link
              v-for="item in status.get(+scope.row.taskResultStatus).operation"
              :key="item.name"
              :underline="false"
              type="primary"
              class="ontology-edit"
              @click.native.prevent="dynamicFunc(item.funcName, scope.row)"
              >{{ item.name }}</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        small
        layout="total, prev, pager, next, sizes, jumper"
        :page-sizes="[10, 20, 30]"
        :total="total"
        :hide-on-single-page="!total"
        :page-size.sync="modelData.pageSize"
        :pager-count="7"
        :current-page="modelData.pageNum"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "CollectionResult",
  data: () => {
    return {
      modelData: {
        taskName: "", // 任务名称
        taskResultStatus: null, // 状态 0 执行中，1执行成功，2执行失败， 3 手动中止，
        pageNum: 1, // 页码
        pageSize: 10, // 每页条数
      },
      tableList: [], // 采集任务列表
      total: 0, // 数据总条数
      loading: false,
      status: new Map([
        [
          0,
          {
            className: "blue",
            name: "执行中",
            operation: [
              {
                name: "查看采集结果",
                funcName: "showDetail",
              },
              {
                name: "终止",
                funcName: "stopTask",
              },
            ],
          },
        ],
        [
          1,
          {
            className: "green",
            name: "执行成功",
            operation: [
              {
                name: "查看采集结果",
                funcName: "showDetail",
              },
            ],
          },
        ],
        [
          2,
          {
            className: "red",
            name: "执行失败",
            operation: [
              {
                name: "查看采集结果",
                funcName: "showDetail",
              },
            ],
          },
        ],
        [
          3,
          {
            className: "gray",
            name: "手动终止",
            operation: [
              {
                name: "查看采集结果",
                funcName: "showDetail",
              },
            ],
          },
        ],
      ]),
      syncType: new Map([
        [1, "全删全增"],
        [2, "追加"],
        [3, "更新"],
      ]),
    };
  },
  created() {
    this.getDigitisingResults();
  },
  methods: {
    // 获取采集任务列表
    getDigitisingResults() {
      const params = this.modelData;
      this.$axios
        .post(this.$api.dataCollection.getDigitisingResults, params)
        .then((res) => {
          let data = res.data.data;
          this.tableList = data.list;
          this.total = +data.totalCount;
          this.modelData.pageNum = +data.pageNum;
          this.$utils.backtop(this.containerDom);
        })
        .catch((err) => {
          console.error(err);
        });
    },

    // 查询
    onSubmit(pageNum) {
      this.modelData.pageNum = pageNum ? pageNum : this.modelData.pageNum;
      this.getDigitisingResults();
    },

    // 修改当前页码
    handleCurrentChange(page) {
      this.modelData.pageNum = page;
      this.getDigitisingResults();
    },

    // 修改每页条数
    handleSizeChange(e) {
      this.modelData.pageSize = e;
      this.getDigitisingResults();
    },
    // 查看采集结果
    showDetail(row) {
      // let id = row.taskResultId;
        let id = row.taskId;
      this.$router.push(
        `/dataReceive/dataCollection/collectionResult/detail/${id}`
      );
    },
    // 终止状态
    changeStatus(params) {
      this.$axios
        .post(this.$api.dataCollection.stopTask, params)
        .then((res) => {
          let { code, message } = res.data;
          if (code !== 200) {
            this.$message.warning(message);
          } else {
            this.$message.success("任务终止中...");
            this.onSubmit();
          }
        });
    },
    dynamicFunc(funcName, row) {
      this[funcName](row);
    },
    // 终止任务
    stopTask(row) {
      this.$confirm("确定终止当前任务?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = { id: row.id };
          this.changeStatus(params);
        })
        .catch();
    },
  },
};
</script>
<style lang="scss" scoped>
.collection-result {
  position: relative;

  .cate-head {
    display: flex;

    .cate-right {
      #btn {
        margin-right: -10px;
      }
    }
  }

  .search-form {
    padding: 16px 32px;
    border-radius: 4px;
    background: #ffffff;

    .el-form-item {
      margin-bottom: 0;
    }

    .form-input {
      margin-right: 32px;

      /deep/ .el-input__inner {
        width: 240px;
        height: 32px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #e0e0e0;
      }
    }
  }

  .el-select {
    /deep/ .el-input__inner {
      width: 240px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #e0e0e0;
    }
  }

  .server-table {
    margin-top: 16px;
    padding: 16px 32px 64px;
    border-radius: 4px;
    background: #ffffff;

    .table-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .table-title-text {
        border-left: 5px solid $--color-primary;
        padding-left: 10px;
        margin: 8px 0;
        font-size: 16px;
        line-height: 16px;
      }

      margin-bottom: 10px;
    }

    .little-circle-blue {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background: #55c898;
      position: relative;
      right: 4px;
      top: -2px;
    }

    .little-circle-red {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background: #ee5564;
      position: relative;
      right: 6px;
      top: -2px;
    }

    .page-wrapper {
      margin-top: 28px;
      display: flex;
      justify-content: flex-end;
      color: rgba(0, 0, 0, 0.65);

      .data-counter {
        font-weight: 400;
        line-height: 32px;
        margin-right: 24px;
      }

      /deep/ .btn-prev,
      /deep/ .btn-next {
        margin: 0 4px;
        min-width: 28px;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        padding: 0;
      }

      /deep/ .el-pager .number {
        min-width: 28px;
        height: 28px;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        margin: 0 4px;
        cursor: pointer;
      }
    }
  }

  .ontology-edit {
    padding: 0 10px;

    & + .ontology-edit {
      border-left: 1px solid #dddddd;
    }
  }

  /deep/ .el-table__append-wrapper {
    padding: 10px;
  }

  .el-pagination {
    float: right;
    margin-top: 20px;

    .form-input /deep/ .el-input {
      width: 200px;
    }

    /deep/ .el-input__inner {
      height: 22px;
    }
  }
}
.little-circle {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  position: relative;
  right: 6px;
  top: -2px;
  &.red {
    background: #ee5564;
  }
  &.green {
    background: #55c898;
  }
  &.blue {
    background: dodgerblue;
  }
  &.gray {
    background: gray;
  }
}
</style>
